<template>
  <div class="cart-control">
    <transition name="move">
      <div class="cart-decrease" v-show="food.count>0" @click.stop="fnDecreaseCart">
        <span class="icon-remove_circle_outline"></span>
      </div>
    </transition>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add" @click.stop="fnAddCart($event)">
      <span class="icon-add_circle"></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  export default {
    props: {
      food: {
        type: Object
      }
    },
    data () {
      return {}
    },
    methods: {
      // 加
      fnAddCart (event) {
        if (!event._constructed) {
          return
        }
        if (!this.food.count) {
          // 新增不存在的元素必须用Vue.set()，否则无效
          Vue.set(this.food, 'count', 1)
        } else {
          this.food.count++
        }

        this.$emit('add-cart', event.target)
      },
      // 减
      fnDecreaseCart () {
        this.food.count--
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cart-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cart-decrease {
      padding: 6px; // 扩大点击区域
      transition: all 0.2s linear;
      .icon-remove_circle_outline {
        display: inline-block;
        font-size: 24px;
        color: rgb(0, 160, 220);
        transition: all 0.2s linear;
      }
      &.move-enter-active, &.move-leave {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        .icon-remove_circle_outline {
          transform: rotate(0);
        }
      }
      &.move-enter, &.move-leave-active {
        opacity: 0;
        transform: translate3d(24px, 0, 0);
        .icon-remove_circle_outline {
          transform: rotate(180deg);
        }
      }
    }
    .cart-count {
      font-size: 10px;
      color: rgb(147, 153, 157);
    }
    .cart-add {
      padding: 6px; // 扩大点击区域
      .icon-add_circle {
        font-size: 24px;
        color: rgb(0, 160, 220);
      }
    }
  }
</style>
